<template>
  <div class="product-manage">
    <div class="page-title">商品管理</div>
    <el-card>
      <el-table :data="tableData" border>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="category" label="分类"></el-table-column>
        <el-table-column prop="price" label="价格" width="100"></el-table-column>
        <el-table-column prop="stock" label="库存" width="100"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === '在售' ? 'success' : 'info'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 模拟商品数据
    const tableData = ref([
      { id: 1, name: '无线鼠标', category: '电脑配件', price: 99, stock: 120, status: '在售' },
      { id: 2, name: '机械键盘', category: '电脑配件', price: 299, stock: 86, status: '在售' },
      { id: 3, name: '蓝牙耳机', category: '音频设备', price: 199, stock: 54, status: '在售' },
      { id: 4, name: '游戏手柄', category: '游戏设备', price: 399, stock: 32, status: '缺货' }
    ]);

    return { tableData };
  }
};
</script>

<style scoped>
.product-manage { height: 100%; }
.page-title { font-size: 20px; font-weight: bold; margin-bottom: 20px; }
</style>